<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>移动端原型图预览</title>
    <style>
      body {
        font-family:
          -apple-system,
          BlinkMacSystemFont,
          'Helvetica Neue',
          Helvetica,
          Segoe UI,
          Arial,
          Roboto,
          'PingFang SC',
          'miui',
          'Hiragino Sans GB',
          'Microsoft Yahei',
          sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        line-height: 1.6;
      }

      h1 {
        text-align: center;
        margin-bottom: 30px;
      }

      .prototype-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
      }

      .prototype-card {
        border: 1px solid #eee;
        border-radius: 8px;
        overflow: hidden;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease;
      }

      .prototype-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }

      .prototype-header {
        background-color: #1989fa;
        color: white;
        padding: 15px;
        font-weight: bold;
      }

      .prototype-body {
        padding: 15px;
      }

      .prototype-body p {
        margin: 0 0 10px;
        color: #666;
      }

      .btn {
        display: inline-block;
        background-color: #1989fa;
        color: white;
        padding: 8px 16px;
        border-radius: 4px;
        text-decoration: none;
        margin-top: 10px;
      }

      .btn:hover {
        background-color: #0076e4;
      }

      .preview-btn {
        display: block;
        width: 200px;
        margin: 30px auto;
        background-color: #07c160;
        color: white;
        padding: 12px 24px;
        border-radius: 4px;
        text-decoration: none;
        text-align: center;
        font-weight: bold;
      }

      .preview-btn:hover {
        background-color: #06ad56;
      }
    </style>
  </head>
  <body>
    <h1>移动端原型图</h1>

    <a href="preview.html" class="preview-btn">打开交互式预览</a>

    <div class="prototype-list">
      <div class="prototype-card">
        <div class="prototype-header">登录模块</div>
        <div class="prototype-body">
          <p>系统用户和客户的登录界面，支持账号密码、手机验证码和微信登录</p>
          <a href="prototype-frames/login.html" class="btn" target="_blank">查看原型</a>
        </div>
      </div>

      <div class="prototype-card">
        <div class="prototype-header">系统用户首页</div>
        <div class="prototype-body">
          <p>系统用户的首页，展示待办事项、数据概览和最近客户/合同/案件</p>
          <a href="prototype-frames/system-home.html" class="btn" target="_blank">查看原型</a>
        </div>
      </div>

      <div class="prototype-card">
        <div class="prototype-header">客户首页</div>
        <div class="prototype-body">
          <p>客户的首页，展示个人信息、合同信息和案件信息</p>
          <a href="prototype-frames/client-home.html" class="btn" target="_blank">查看原型</a>
        </div>
      </div>

      <div class="prototype-card">
        <div class="prototype-header">详情页</div>
        <div class="prototype-body">
          <p>客户/合同/案件的详情页，展示详细信息和关联数据</p>
          <a href="prototype-frames/detail.html" class="btn" target="_blank">查看原型</a>
        </div>
      </div>

      <div class="prototype-card">
        <div class="prototype-header">数据统计</div>
        <div class="prototype-body">
          <p>数据统计分析页面，展示客户/合同/案件的统计图表</p>
          <a href="prototype-frames/stats.html" class="btn" target="_blank">查看原型</a>
        </div>
      </div>

      <div class="prototype-card">
        <div class="prototype-header">消息中心</div>
        <div class="prototype-body">
          <p>消息中心页面，展示系统通知和用户消息</p>
          <a href="prototype-frames/message.html" class="btn" target="_blank">查看原型</a>
        </div>
      </div>

      <div class="prototype-card">
        <div class="prototype-header">微信授权</div>
        <div class="prototype-body">
          <p>微信授权登录流程，获取用户信息并绑定账号</p>
          <a href="prototype-frames/wechat-auth.html" class="btn" target="_blank">查看原型</a>
        </div>
      </div>

      <div class="prototype-card">
        <div class="prototype-header">个人中心</div>
        <div class="prototype-body">
          <p>个人中心页面，展示用户信息和系统设置</p>
          <a href="prototype-frames/profile.html" class="btn" target="_blank">查看原型</a>
        </div>
      </div>
    </div>
  </body>
</html>
